<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="SPU名称">
        <span>{{ spuName }}</span>
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="form.skuName" style="max-width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input
          min="1"
          type="number"
          v-model="form.price"
          style="max-width: 50%"
        ></el-input>
      </el-form-item>
      <el-form-item label="重量(kg)">
        <el-input v-model="form.weight" style="max-width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input
          v-model="form.skuDesc"
          type="textarea"
          style="max-width: 50%"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form-item
          v-for="data in AttrList"
          :key="data.id"
          :label="data.attrName"
        >
          <!-- 添加currentCheckedId标识,到时候通过currentCheckedId找到选择的值 -->
          <el-select v-model="data.currentCheckedId" placeholder="">
            <el-option
              v-for="obj in data.attrValueList"
              :key="obj.id"
              :label="obj.valueName"
              :value="obj.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="售卖属性">
        <el-form-item
          v-for="data in SaleAttrList"
          :key="data.id"
          :label="data.saleAttrName"
        >
          <!-- 添加currentCheckedId标识,到时候通过currentCheckedId找到选择的值 -->
          <el-select v-model="data.currentCheckedId" placeholder="">
            <el-option
              v-for="obj in data.spuSaleAttrValueList"
              :key="obj.id"
              :label="obj.saleAttrValueName"
              :value="obj.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="SKU图片">
        <el-table
          border
          :data="spuImgList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="选择" type="selection" align="center">
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="{ row }">
              <img
                style="width: 150px; height: 100px; object-fit: contain"
                :src="row.imgUrl"
              />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-tag
                v-if="row.isDefault && row.isDefault == 1"
                disable-transitions
                >默认图片</el-tag
              >
              <el-button
                v-else
                type="primary"
                size="mini"
                @click="setDefaultImg(row, spuImgList)"
                >设置默认图片</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 保存取消 -->
      <el-button type="primary" @click="saveInfo" :disabled="!form.skuName">
        保存</el-button
      >
      <el-button type="" @click="cancel"> 取消</el-button>
    </el-form>
  </div>
</template>

<script>
import changeShow from '../changeShow'
export default {
  data() {
    return {
      spuName: '',
      spuId: '',
      category3Id: '',
      tmId: '',
      SaleAttrList: [],
      AttrList: [],
      spuImgList: [],
      form: {
        category3Id: 0,
        spuId: 0,
        // 品牌ID
        tmId: 0,
        // 2021-12-10 09:31:42
        createTime: '',
        // sku id,添加时无id
        id: undefined,
        isSale: 1,
        skuName: '',
        skuDesc: '',
        weight: '',
        skuDefaultImg: '',
        price: 1,
        // sku平台属性
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   attrName: '',
          //   id: 0,
          //   skuId: undefined,
          //   valueId: 0,
          //   valueName: ''
          // }
        ],
        // sku售卖属性
        skuSaleAttrValueList: [
          // {
          //   id: 0,
          //   saleAttrId: 0,
          //   saleAttrName: '',
          //   saleAttrValueId: 0,
          //   saleAttrValueName: '',
          //   skuId: undefined,
          //   spuId: 0
          // }
        ],
        skuImageList: [
          // {
          //   id: undefined,
          //   imgName: '',
          //   imgUrl: '',
          //   isDefault: '',
          //   skuId: this.form.id,
          //   spuImgId: 0
          // }
        ]
      }
    }
  },
  methods: {
    // 设置默认图片
    setDefaultImg(row, list) {
      this.form.skuDefaultImg = row.imgUrl
      list.forEach((item) => {
        if (item == row) {
          item.isDefault = '1'
        } else {
          item.isDefault = '0'
        }
      })
    },
    // 添加勾选的图片
    handleSelectionChange(val) {
      this.form.skuImageList = val
    },
    // 提交
    // sku名称,重量,价格必须填写,否则后台提交失败
    async saveInfo() {
      const { category3Id, spuId, tmId, form, AttrList, SaleAttrList } = this
      // 合法性判断
      if (form.skuName && form.price > 0 && form.weight) {
        // 数据整理
        form.category3Id = category3Id
        form.spuId = spuId
        form.tmId = tmId
        // <!-- 添加currentCheckedId标识,到时候通过currentCheckedId找到选择的值 -->
        //  添加选择的平台属性
        AttrList.forEach((item) => {
          let currentCheckedId = item.currentCheckedId
          item.attrValueList.forEach((value) => {
            if (value.id == currentCheckedId) {
              form.skuAttrValueList.push({
                // 属性名
                attrId: item.id,
                attrName: item.attrName,
                // 该记录id 无
                id: undefined,
                // 属性值
                skuId: undefined,
                valueId: value.id,
                valueName: value.valueName
              })
            }
          })
        })
        // 添加选择的售卖属性
        SaleAttrList.forEach((item) => {
          let id = item.currentCheckedId
          item.spuSaleAttrValueList.forEach((value) => {
            if (value.id == id) {
              form.skuSaleAttrValueList.push({
                // 该记录id 无
                id: undefined,
                // 属性名
                saleAttrId: item.id,
                saleAttrName: item.saleAttrName,
                // 属性值
                saleAttrValueId: value.id,
                saleAttrValueName: value.saleAttrValueName,
                skuId: undefined,
                spuId
              })
            }
          })
        })

        const res = await this.$API.sku.addSkuInfo(form)
        if (res.code == 200) {
          this.$message({ type: 'success', message: '添加SKU成功' })
          this.clearForm()
          this.emitchangeShow()
        } else {
          this.$message({
            type: 'error',
            message: res.message + ':' + (res.data || '')
          })
        }
      } else {
        this.$message({ type: 'warning', message: '请完整填写:名称,价格,重量' })
      }
    },
    cancel() {
      const { skuName, skuDesc, weight } = this.form
      if (skuName || skuDesc || weight) {
        this.$confirm('当前数据未保存是否仍要返回?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
          .then(() => {
            this.clearForm()
            this.emitchangeShow()
          })
          .catch(() => {})
      } else {
        this.emitchangeShow()
      }
    },
    // 切换显示
    emitchangeShow(is_update, flag) {
      this.$emit('changeShow', is_update, flag)
    },
    // 获spu对应的取售卖属性列表
    async getSaleAttrList(spuId) {
      const res = await this.$API.sku.getSaleAttrList(spuId)
      if (res.code == 200) {
        this.SaleAttrList = res.data
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    // 获取平台属性列表
    async getAttrList(categoryId) {
      const { c1, c2, c3 } = categoryId
      const res = await this.$API.sku.getAttrList(c1, c2, c3)
      if (res.code == 200) {
        this.AttrList = res.data
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    // 获取spu图片列表
    async getSpuImageList(spuId) {
      const res = await this.$API.sku.getSpuImageList(spuId)
      if (res.code == 200) {
        res.data.forEach((item) => {
          if (!item.isDefault) {
            item['isDefault'] = '0'
          }
        })
        this.spuImgList = res.data
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    async addSkuInfo({ spuId, categoryId, spuName, tmId }) {
      this.spuName = spuName
      this.spuId = spuId
      this.category3Id = categoryId.c3
      this.tmId = tmId
      await this.getSaleAttrList(spuId)
      await this.getSpuImageList(spuId)
      await this.getAttrList(categoryId)
      this.emitchangeShow(false, changeShow.addSku)
    },
    clearForm() {
      this.form = {
        category3Id: 0,
        spuId: 0,
        // 品牌ID
        tmId: 0,
        createTime: '',
        // sku id,添加时无id
        id: undefined,
        isSale: 1,
        skuName: '',
        skuDesc: '',
        weight: '',
        skuDefaultImg: '',
        price: 1,
        // sku平台属性
        skuAttrValueList: [],
        // sku售卖属性
        skuSaleAttrValueList: [],
        skuImageList: []
      }
    }
  },
  created() {
    this.$Bus.$on('addSkuInfo', this.addSkuInfo)
  }
}
</script>

<style></style>
